<template>
    <div class="sin-bak">
        <van-form @submit="onSubmit">
        <div class="cross-box">
            <router-link to='/my'>
            <van-icon name="cross" size="30" color="#000000"/>
            </router-link>
        </div>
        <div class="Sign-in-text">
            <p>亲，欢迎登录</p>
            <div class="Sign-in-text-box">
                <span class="Sign-in-text-box1">没有淘宝账户？</span>
                <router-link to='/register'>
                <span class="Sign-in-text-box2">立即注册</span>
                </router-link>
            </div>
        </div>
        <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名'},{pattern:/,mes^[\u4E00-\u9FA5A-Za-z0-9]{4,8}$/,sage:'用户名只能为4~6位之间的中文、英文、数字'}]"
        />
        <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' },{pattern:/^[A-Za-z0-9]{6,12}$/,message:'密码只能为6~12位之间的英文、数字'}]"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
                确认
            </van-button>
        </div>
    </van-form>
    </div>
</template>

<script>
    export default {
        name: "Sin",
        data() {
            return {
            username: '',
            password: '',
            pattern: /^[A-Za-z0-9]{6,12}$/
            };
        },
        // 点击登录，判断后将用户名上传在本地储存
        methods: {
            onSubmit(values) {
                // console.log('submit', values);
                let dataStr = JSON.stringify(values)
                localStorage.setItem('user',dataStr)
                this.$router.push({
                    name: 'My'
                })
            },
        },
};
</script>

<style scoped>
    .sin-bak {
        background-color: #ffffff;
    }
    .van-button--info {
        color: #fff;
        background: linear-gradient(90deg,#F5962E,#F57C2E,#F56E2E,#F55D2E);
        border: 1px solid #fff;
    }
    .cross-box {
        height: 50px;
    }
    .cross-box {
        margin: 10px;
    }
    .Sign-in-text {
        margin: 10px 17px;
    }
    .Sign-in-text p {
        font-size: 30px;
        margin-bottom: 10px;
    }
    .Sign-in-text-box1 {
        font-size: 14px;
        color: #999999;
    }
    .Sign-in-text-box2 {
        font-size: 14px;
        color: #F55D2E;
    }
    .van-cell {
        margin: 10px 0;
    }
</style>